<template>
  <div style="margin-bottom: 5px" >
    <div v-for="(item,index) in config" :key="index" class="kz-cont control-panel-wrapper">
      <!-- 文本框 -->
      <el-input
        v-if="item.type === 'text'"
        v-model="item.val"
        type="text"
        style="width: 200px;"
        clearable
        @keyup.enter.native="onSearch"
        :placeholder="
          item.placeholder != undefined ? item.placeholder : '请输入'
        "
      />
      <!-- 日期框 -->
      <div v-else-if="item.type === 'date_time'" class="control-panel-description">
      <el-date-picker
        v-model="item.val"
        type="datetimerange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        @input="onChangeDate($event)"
      />
      </div>
      <!-- 下拉选择器 -->
      <el-select
        v-else-if="item.type === 'select'"
        v-model="item.val"
        filterable
        clearable
        style="width: 120px;"
        :placeholder="
          item.placeholder != undefined ? item.placeholder : '请选择'
        "
      >
        <el-option
          v-for="(item2,i) in item.options"
          :key="item2.value!=undefined?item2.value:i"
          :label="item2.label!=undefined?item2.label:item2"
          :value="item2.value!=undefined?item2.value:i"
        />
      </el-select>
      <!-- 级联选择器 -->
      <el-cascader
        v-else-if="item.type === 'cascader'"
        v-model="item.val"
        filterable
        clearable
        :placeholder="
          item.placeholder != undefined ? item.placeholder : '请选择'
        "
        :options="item.options"
      />
      <el-button :type="item.class" :icon="item.icon" @click="onOutput"
      v-else-if="item.type === 'output'"
        >{{item.button_name}}
      </el-button>
    </div>
    <div class="kz-cont">
      <el-button type="success" icon="el-icon-search" @click="onSearch"
        >查询
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Control",
  props: ["config"],
  data() {
    return {
      date: "",
    };
  },
  mounted() {
    //this.onload()
  },
  methods: {

    onChangeDate(event) {},
    // 日期转换
    dateChange(time) {
      var date = new Date(time);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var seconds = date.getSeconds();
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + seconds;
    },
    onSearch() {
      var config = this.config;
      var map = {};
      for (var i = 0; i < config.length; i++) {
        if (config[i].type === "date_time") {
          if(config[i].val!=undefined &&config[i].val.length>0){
            map[config[i].field] = {};
            map[config[i].field].start = this.dateChange(config[i].val[0]);
            map[config[i].field].end = this.dateChange(config[i].val[1]);
          }

        } else {
          map[config[i].field] = config[i].val;
        }
      }
      this.$parent.searchWhere = map;
      this.$parent.current_page = 1;
      if(this.$parent.onSearch!=undefined){
        this.$parent.onSearch();
      }else{
        this.$emit('onSearch',map)
      }
    },
    //读缓存中的搜索信息(已废弃)
    onload(){
      let cache=JSON.parse(localStorage.getItem(process.env.CACHE_CONTROL))
      if(cache!=undefined&&cache.map!=undefined){
        localStorage.setItem(process.env.CACHE_CONTROL,null)
        for(let item in cache.map){
          for(let i in this.config){
            if(this.config[i].field==item){
              if(this.config[i].type=='date_time'){
                  this.config[i].val=[cache.map[item].start,cache.map[item].end]
              }else
              this.config[i].val=cache.map[item]
            }
          }
        }
        this.$parent.searchWhere = cache.map;
        this.$parent.current_page=cache.current_page
      }
    },
    onOutput() {
      var config = this.config;
      var map = {};
      for (var i = 0; i < config.length; i++) {
        if (config[i].type === "date_time") {
          if(config[i].val!=undefined &&config[i].val.length>0){
            map[config[i].field] = {};
            map[config[i].field].start = this.dateChange(config[i].val[0]);
            map[config[i].field].end = this.dateChange(config[i].val[1]);
          }

        } else {
          map[config[i].field] = config[i].val;
        }
      }
      this.$parent.searchWhere = map;
      this.$parent.onOutput();
    },
  },
};
</script>

<style>
.kz-cont {
  display: inline-block;
  float: left;
  padding-right: 5px;
}

@media (max-width:550px) {
  .control-panel-description {
    /* display: none; */
    width: 100%
  }
  .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner {
    width: 100%;
}
  .control-panel-wrapper {
    float: none !important;
    width: 30%;
    height: 100%;
    margin: 0 !important;
  }
}
</style>
